<template>
  <BasicDrawer
    :destroyOnClose="true"
    v-bind="$attrs"
    @register="registerDrawer"
    :showFooter="true"
    cancelText="关闭"
    :showOkBtn="false"
    :title="state.title"
    width="980px"
    :maskClosable="false"
  >
    <template #appendFooter>
      <a-button v-if="!record.isSignCode" type="primary" @click="onSignature">客户签字</a-button>
    </template>
    <div class="card">
      <div class="c-title"> 基础信息</div>

      <div class="c-body">
        <a-row :gutter="[12, 12]">
          <a-col :span="3" class="label"> 订单编号</a-col>
          <a-col :span="9" class="value">
            <span>{{ record.masterOrderSn }}</span>
          </a-col>

          <a-col :span="3" class="label"> 制单人</a-col>
          <a-col :span="9" class="value">
            {{ record.cashierName }}
          </a-col>

          <a-col :span="3" class="label"> 下单时间</a-col>
          <a-col :span="9" class="value">
            {{ record.addTime }}
          </a-col>

          <!-- <a-col :span="3" class="label"> 订单状态</a-col>
          <a-col :span="9" class="value">
            {{ getLabel(orderStatus, record.orderStatus) }}
          </a-col> -->

          <a-col :span="3" class="label"> 客户信息</a-col>
          <a-col :span="9" class="value">
            {{ record.memberName }}&nbsp;{{ record.memberMobile }}
          </a-col>
          <a-col :span="3" class="label"> 备注</a-col>
          <a-col :span="21" class="value">
            {{ record.remarks }}
          </a-col>
        </a-row>
      </div>

      <div class="c-title" style="margin: 32px 0 12px 0"> 商品信息</div>
      <table class="sub-table">
        <thead>
          <tr class="cn-medium th">
            <td style="text-align: center">商品信息</td>
            <td>数量</td>
            <td>属性</td>
            <td>美容师</td>
            <td>使用卡项</td>
            <td>折后价</td>
            <td>应付金额</td>
            <td style="text-align: center">操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in record?.responseMasterOrderItemBeanList" :key="index">
            <td style="width: 290px">
              <pro-img-cell :src="item.goodsThumb" :title="item.goodsName"></pro-img-cell>
            </td>
            <td> x{{ item.goodsQty }} </td>
            <td>
              <span v-if="item.itemGoodsType === 4 && item.extensionCode === 'cash'">卡续充</span>
              <span v-else-if="item.itemGoodsType === 5 && item.extensionCode === 'cash'">卡升级</span>
              <span v-else-if="item.extensionCode === 'banlance' || item.extensionCode === 'times'">耗卡</span>
              <span v-else-if="item.extensionCode === 'gift'" style="
                          border-radius: 3px;
                          border: 1px solid #f2a8ba;
                          font-size: 12px;
                          color: #f1a3b8;
                          padding: 2px 4px;
                        ">赠品</span>
              <span v-else>购买</span>
            </td>
            <td>
              {{ item.cashierName }}
            </td>
            <td>
              {{ item.cardConsumeName ?? '--' }}
            </td>
            <td>
              <span>¥</span>
              <span>{{ item.settlementPrice }}</span>
            </td>
            <td>
              <span>¥</span>
              <span>{{ item.shareCashPirce || 0 }}</span>
            </td>

            <td align="center">
              <template
                v-if="
                  ![4, 5].includes(item.itemGoodsType) &&
                  item.extensionCode !== 'gift' &&
                  item.benefitsType !== 2 &&
                  item.goodsQty > item.returnGoodsQty
                "
              >
                <template v-if="item.itemGoodsType === 3">
                  <a @click="onRefund3(record, item)">退卡</a>
                </template>
                <template v-else>
                  <a v-if="!!item.cardConsumeCode" @click="onRefund2(record, item)">退款</a>
                  <a v-else @click="onRefund(record, item)">退款</a>
                </template>
              </template>
              <a @click="toBackList(record, item)" style="margin-left: 10px" v-if="item.returnGoodsQty">查看售后</a>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="c-title" style="margin: 32px 0 6px 0"> 支付信息</div>

      <div class="c-body">
        <a-row :gutter="[12, 12]">
          <a-col :span="3" class="label"> 商品金额</a-col>
          <a-col :span="9" class="value">
            <span>￥</span><span>{{ record.goodsFee }}</span>
          </a-col>

          <a-col :span="3" class="label"> 折后金额</a-col>
          <a-col :span="9" class="value">
            <span>￥</span><span>{{ record.totalDisAfterFee }}</span>
          </a-col>

          <a-col :span="3" class="label"> 抵扣金额</a-col>
          <a-col :span="9" class="value">
            <span>￥</span><span>{{ record.cardTotalPay ?? 0 }}</span>
          </a-col>

          <a-col :span="3" class="label"> 应付金额</a-col>
          <a-col :span="9" class="d-medium value" style="color: #eb6485">
            <span>￥</span><span>{{ record.cashCardPay ?? 0 }}</span>
          </a-col>

          <a-col :span="3" class="label"> 支付方式</a-col>
          <a-col :span="9" class="value">
            {{ record.payTitle ?? '--' }}
          </a-col>

          <a-col :span="3" class="label"> 实付金额</a-col>
          <a-col :span="9" class="d-medium value" style="color: #eb6485">
            <span>￥</span><span>{{ record.payTotalFee }}</span>
          </a-col>

          <a-col :span="3" class="label"> 客户签名</a-col>
          <a-col :span="9" class="value">
            <span v-if="!record.signName">--</span>
            <img v-else :src="record.signName" alt="" style="width: 160px; object-fit: contain" />
          </a-col>

          <a-col :span="3" class="label"> 欠款金额</a-col>
          <a-col :span="9" class="d-medium value" style="color: #eb6485">
            <span>￥</span><span>{{ record.debtFee }}</span>
          </a-col>
        </a-row>
      </div>
    </div>
  </BasicDrawer>

  <OrderRefund @register="registerRefund" @complete="loadData" />
  <OrderRefund2 @register="registerRefund2" @complete="loadData" />
  <OrderCardSelect @register="registerRefund3" @complete="loadData" />
  <OrderSignature @register="registerSignature" @complete="loadData" />
</template>

<script setup>
  import { defineOptions, reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  
  import { BasicDrawer, useDrawer, useDrawerInner } from '@/components/Drawer';
  
  import { useMessage } from '@/hooks/web/useMessage';
  import { POST } from '@/api/http.js';
  import { getLabel, orderStatus } from '@/api/ds.js';
  import ProImgCell from '@/widget/pro-img-cell.vue';

  import OrderRefund from './order-refund.vue';
  import OrderRefund2 from './order-refund-2.vue';
  import OrderCardSelect from './order-card-select.vue';
  import OrderSignature from './order-signature.vue';
  import { useModal } from '@/components/Modal';

  defineOptions({ name: 'OrderDetail' });

  const [registerRefund, { openDrawer: refundDrawer }] = useDrawer();
  const [registerRefund2, { openDrawer: refundDrawer2 }] = useDrawer();
  const [registerRefund3, { openModal: refundModal3 }] = useModal();
  const [registerSignature, { openDrawer: signatureDrawer }] = useDrawer();

  const router = useRouter();
  const emit = defineEmits(['complete']);
  const state = reactive({ title: '', masterOrderSn: null, memberCode: null, });
  const record = ref({});

  const { createMessage } = useMessage();
  let TDOrderSn = '';
  const [registerDrawer, { closeDrawer }] = useDrawerInner(
    async ({ masterOrderSn, memberCode, isTD, oldOrderSn, }) => {
      console.log( masterOrderSn, memberCode, isTD)
      state.title = '订单详情';
      Object.assign(state, { masterOrderSn, memberCode, isTD });
      if(isTD){
        TDOrderSn = oldOrderSn;
      }
      await loadData();
    },
  );

  async function loadData() {
    const { masterOrderSn, memberCode, isTD } = state;

    record.value =
      await POST('/cashier/getMasterOrderDetailsBean', {
        masterOrderSn: isTD ? TDOrderSn : masterOrderSn, 
        memberCode
      }) ?? {};
  }

  /* async function loadData() {
    const { masterOrderSn, oldOrderSn } = state;
    record.value = await POST('/cashier/getMasterOrderDetailsBean', {
        masterOrderSn,
        oldOrderSn,
      }) ?? {};
  } */

  function onRefund(orderHeader, item) {
    refundDrawer(true, { orderHeader, record: item });
  }

  function onRefund2(orderHeader, item) {
    refundDrawer2(true, { orderHeader, record: item });
  }

  function onRefund3(orderHeader, item) {
    refundModal3(true, { orderHeader, record: item });
  }

  function onSignature() {
    signatureDrawer(true, { orderHeader: record });
  }

  // 查看售后-携带订单号前往退单页查询
  function toBackList(record, item) {
    router.push(`/report/back-list?masterOrderSn=${record.masterOrderSn}`)
  }
</script>

<style lang="less" scoped>
  .card {
    margin: 8px 0 46px;
    padding: 12px;

    .c-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      column-gap: 8px;
      color: #091f3d;
      font-size: 15px;
      font-weight: 600;
    }

    .c-body {
      margin-top: 16px;

      .label {
        color: #acb4bf;
      }

      .value {
        color: #091f3d;
      }
    }
  }
</style>

<style lang="less" scoped>
  .sub-table {
    background-color: #fff;

    border: 1px solid #f0f0f0;
    border-collapse: collapse;
    width: 100%;

    tr {
      border: 1px solid #f0f0f0;
      border-collapse: collapse;
      color: #333;
    }

    .td {
      padding: 4px 6px;
    }

    .th {
      height: 36px;
      background-color: #f0f0f0;
    }
  }
</style>
